<template>
  <div class="enter-peopleIntor">
    <div>
      <el-carousel height="500px" motion-blur v-if="pageSetValue.banner.length">
        <el-carousel-item v-for="(item,index) in pageSetValue.banner" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.url" fit="cover" />
          <div style="position: absolute;z-index: 100;" v-html="item.bannerText" class="ql-editor"
               :style="{left: item.pingyiweizhi == '左边' ? '5%' : item.pingyiweizhi == '中间' ? '50%' : '90%'},
{top: item.shuipingweizhi == '顶部' ? '40px' : item.shuipingweizhi == '居中' ? '50%' : '90%'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>


    <div style="width: 100%;background: #fff;padding: 10px;" v-if="pageSetValue.pinpaiguangan">
      <div style="width: 70%;margin: 0 auto;display: flex;flex-wrap: wrap;align-items: flex-start;
      padding: 10px 10px 0 10px;border-radius: 3px;
    " class="guanwang-bg">
        <div style="display: flex;justify-content: center;width: 100%">
          <img src="https://www.china-beyond.com/Uploads/ueditor/image/20140916/1410839509367392.jpg" v-if="pageSetValue.pinpaiguangan">
        </div>
        <div class="ql-editor" v-html="pageSetValue.pinpaiguangan"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {useRoute} from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  import gsap from 'gsap'
  const route = useRoute()
  const scrStore = screenStore()
  const pageSetValue = ref({})
  onMounted(() => {
    if(JSON.stringify(route.query) != '{}'){
      const {prentInd,name} = route.query
      const dataArr = scrStore.guanwangPage[prentInd * 1].tableData
      const ind = dataArr.findIndex(item => item.name == name)
      pageSetValue.value = dataArr[ind].pageJson
    }
    gsap.fromTo(".enter-peopleIntor", {
      opacity:0,
    },{
      opacity:1,
      duration: 2,
    });
  })
</script>

<style scoped lang="less">
  @import "quill/dist/quill.snow.css";
  /* 针对 Quill 生成的居中类添加样式 */
  .enter-peopleIntor .ql-editor ::v-deep .ql-align-center {
    text-align: center !important;
  }

  /* 确保图片在居中容器内正确显示 */
  .enter-peopleIntor .ql-editor ::v-deep .ql-align-center img {
    display: inline-block !important; /* 关键：避免图片默认块级元素导致的居中失效 */
    margin: 0 auto !important;
  }
  .guanwang-bg .ql-editor ::v-deep .ql-align-center {
    text-align: center !important;
  }

  /* 确保图片在居中容器内正确显示 */
  .guanwang-bg .ql-editor ::v-deep .ql-align-center img {
    display: inline-block !important; /* 关键：避免图片默认块级元素导致的居中失效 */
    margin: 0 auto !important;
  }
  .bg-people{
    width: 360px;
    height: 415px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px #f1eded;
    background: #fff;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  .image-hover-scale-bg123{
    transition:all 0.7s;
    &:hover{
      transform: scale(1.2);
    }
  }

</style>
